<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul,li{margin: 0;padding: 0;}
			li{list-style: none;}
			#box{margin: 50px auto;width: 800px;-moz-user-select: none;-webkit-user-select: none;}
			#box h5{line-height:35px; font-size:14px; border-bottom:1px dashed #666; margin-bottom:10px;}
			#box ul li{background: url(images/ckbg1.jpg) no-repeat;background-size:20px 20px;float: left;text-indent:25px;margin-left: 30px;
			cursor:pointer;font-size: 14px;
			}
			#box ul li.on{background: url(images/ckbg2.jpg) no-repeat;}
		</style>
	</head>
	<body>
		<div id="box">
			<h5>你的喜欢的水果</h5>
			<ul>
				<li>苹果</li>
				<li>梨子</li>
				<li>香蕉</li>
				<li>葡萄</li>
				<li>西瓜</li>
				<li>芒果</li>
			</ul>
		</div>	
		<script>
			var aLi = document.getElementsByTagName('li');
			for (let i = 0; i < aLi.length; i++) {
				aLi[i].onclick = function(){
					//console.log(this.className)
					if (this.className=='') {
						this.className = "on";
					} else{
						this.className = "";
					}
				}
			}
		</script>
	</body>
</html>
